/**
 * Created by zhangsong on 2019-05-08.
 */

import React, { Component } from 'react';
import { Button, Form, Input, Radio, Select, Tooltip, Icon, Spin } from 'antd';
import { connect } from 'dva';
import { formatMessage, FormattedMessage, getLocale } from '@/utils/i18n';
import ContractorReducer from '@/dva/application/temporary';
import UserReducer from '@/dva/user';
import Style from './search.module.scss';

const { Namespace, Effects } = ContractorReducer;

@connect(
  state => ({
    contractorStore: state[Namespace],
    userStore: state[UserReducer.Namespace],
  }),
  dispatch => ({
    handleSearchSubmit: data =>
      dispatch({
        type: `${Namespace}/${Effects.listByParam}`,
        data,
      }),
  }),
)
@Form.create()
class SearchApp extends Component {
  handleClear = () => {
    const { form } = this.props;
    form.setFieldsValue({
      name: undefined,
      card_type: undefined,
      identity_card: undefined,
      location: undefined,
      approved: undefined,
      is_expire: undefined,
      pass_no: undefined,
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    const { form } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        const { handleSearchSubmit, contractorStore } = this.props;
        const { ...other } = values;
        const query = {
          ...other,
        };
        // if (Array.isArray(location) && location.length > 0) {
        //   query.location = location.join('|');
        // }
        console.log('queryquery', query)
        handleSearchSubmit({
          query,
          page: 1,
          pageSize: contractorStore.pageSize,
        });
      }
    });
  };

  onDownload = () => {
    this.props.onDownload();
  };

  render() {
    const { form, userStore = {}, contractorStore = {} } = this.props;
    const { getFieldDecorator } = form;
    const { area, } = userStore;
    const { loctionList } = contractorStore;
    const zoneTips = Array.isArray(area) ? (
      <div className={Style.zoneTipsWrapper}>
        {area.map(item => (
          <div
            key={item.id + (getLocale() === 'en-US' ? item.areaDescEn : item.areaDescZh)}
            className={Style.zoneTipsRow}
          >
            <div className={Style.zoneTipsLabel}>{item.areaCode}</div>
            <div>=</div>
            <div>{getLocale() === 'en-US' ? item.areaDescEn : item.areaDescZh}</div>
          </div>
        ))}
      </div>
    ) : null;
    return (
      <div className={Style.searchFormWrapper}>
        {/* <div style={{ display: 'flex', justifyContent: 'end', padding: '0 0 10px' }}>
          <Button htmlType="button" icon="download" onClick={() => this.onDownload()}>
            {formatMessage('button.newdownload')}
          </Button>
        </div> */}
        <Form layout="inline" onSubmit={this.handleSubmit}>
          <div className="item-wrapper">
            <Form.Item label={formatMessage('applicationContractor.temporary.name')}>
              {getFieldDecorator('name', {})(<Input maxLength={50} />)}
            </Form.Item>
          </div>
          <div className="item-wrapper">
            <Form.Item label={formatMessage('applicationContractor.temporary.cardType')}>
              {getFieldDecorator('card_type', {})(
                <Select allowClear placeholder={formatMessage('baseInfo.placeholderChecked')}>
                  <Select.Option value={1}>
                    <FormattedMessage id="applicationCommon.readerCard.tempone" />
                  </Select.Option>
                  <Select.Option value={2}>
                    <FormattedMessage id="applicationCommon.readerCard.temptwo" />
                  </Select.Option>
                </Select>,
              )}
            </Form.Item>
          </div>
          <div className="item-wrapper">
            <Form.Item label={formatMessage('applicationContractor.columns.identityCard.name')}>
              {getFieldDecorator('identity_card', {})(<Input maxLength={50} />)}
            </Form.Item>
          </div>
          <div className="item-wrapper">
            <Form.Item label={formatMessage('applicationCommon.readerCard.canceltakes')}>
              {getFieldDecorator('is_expire', {
                initialValue: 2,
              })(
                <Select allowClear placeholder={formatMessage('baseInfo.placeholderChecked')}>
                  <Select.Option value={0}>
                    <FormattedMessage id="baseInfo.all" />
                  </Select.Option>
                  <Select.Option value={2}>
                    <FormattedMessage id="applicationCommon.readerCard.noexpired" />
                  </Select.Option>
                  <Select.Option value={1}>
                    <FormattedMessage id="applicationCommon.readerCard.expired" />
                  </Select.Option>
                </Select>,
              )}
            </Form.Item>
          </div>
          <div className="item-wrapper">
            <Form.Item
              label={formatMessage('applicationCommon.readerCard.passno')}
            >
              {getFieldDecorator('pass_no', {})(<Input />)}
            </Form.Item>
          </div>
          <div className="item-wrapper">

          </div>
          <div className="item-wrapper search-button">
            <Button htmlType="button" onClick={this.handleClear}>
              {formatMessage('button.clear')}
            </Button>
            <Button type="primary" htmlType="submit">
              {formatMessage('button.search')}
            </Button>
          </div>
        </Form>
      </div>
    );
  }
}

export default SearchApp;
